<!--
 * @Author: Hzh
 * @Date: 2021-04-23 10:13:38
 * @LastEditTime: 2021-04-23 15:47:58
 * @LastEditors: Hzh
 * @Description:
-->
<template>
    <div class="home">
        <div class="BLQT_card">
            <div class="BLQT_title">
                <div class="big_title">
                    LW15A-550 分闸线圈曲线
                    <span>x</span>
                </div>
            </div>
            <div class="BLQT_content">
                <div class="tu">
                    <div id="tu_a" class="tu_style"></div>
                    <div id="tu_b" class="tu_style"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import * as echarts from "echarts";
import jsonData1 from "../views/data1.json";
import jsonData2 from "../views/data2.json";

export default {
    data() {
        return {};
    },
    name: "Home",
    components: {},
    mounted() {
        // 图
        this.tu_a_data();
        this.tu_b_data();
    },
    methods: {
        // // 折线图1
        // tu_a_data() {
        //   console.log(echarts);
        //   var myChart = echarts.init(document.getElementById("tu_a"));
        //   myChart.resize({
        //     width: 580,
        //     height: 550
        //   });

        //   // 配置折线图选项
        //   var option = {
        //     // animationDuration: 10000,
        //     title: {},
        //     tooltip: {
        //       trigger: "axis"
        //     },
        //     legend: {
        //       textStyle: {
        //         color: "#fff",
        //         fontSize: 20
        //       },
        //       top: "2%"
        //       // left: "30%"
        //     },
        //     grid: {
        //       height: 400,
        //       width: 480
        //     },
        //     xAxis: {
        //       type: "category",
        //       boundaryGap: false,
        //       show: true,
        //       axisLabel: {
        //         showMinLabel: true,
        //         interval: 0,
        //         color: "#fff"
        //       },
        //       axisTick: {
        //         interval: 40,
        //         show: false
        //       },

        //       data: []
        //     },
        //     yAxis: [
        //       {
        //         type: "value",
        //         axisLabel: {
        //           formatter: "{value}",
        //           color: "#fff",
        //           show: false,
        //           fontSize: 18
        //         },
        //         axisLine: {
        //           show: true
        //         },
        //         splitLine: {
        //           show: false,
        //           lineStyle: {
        //             color: "#333" // 将分隔线颜色设置为灰色
        //           }
        //         },

        //         splitNumber: 0.1,
        //         max: 1.6
        //       },
        //       {
        //         type: "value",
        //         // position: "right",
        //         // inverse: true,
        //         axisLabel: {
        //           formatter: "{value}",
        //           color: "#fff",
        //           show: false
        //         },
        //         axisLine: {
        //           show: true
        //         },
        //         splitLine: {
        //           show: false
        //           // lineStyle: {
        //           //   color: "#333" // 将分隔线颜色设置为灰色
        //           // }
        //         },
        //         // splitNumber: 1,
        //         min: 0
        //       }
        //     ],
        //     series: [
        //       {
        //         name: "电流（i/A）",
        //         type: "line",
        //         yAxisIndex: 0, // 关联第一个 Y 轴
        //         // stack: 'Total',
        //         data: jsonData1.data,
        //         symbol: "none"
        //       },
        //       {
        //         name: "行程（s/mm）",
        //         type: "line",
        //         yAxisIndex: 1, // 关联第一个 Y 轴
        //         // stack: 'Total',

        //         data: jsonData2.data,
        //         symbol: "none"
        //       }
        //     ]
        //   };
        //   // 使用配置项绘制饼图
        //   myChart.setOption(option);
        // }

        tu_a_data() {
            console.log(echarts);
            var myChart = echarts.init(document.getElementById("tu_a"));
            myChart.resize({
                width: 580,
                height: 250
            });

            // 配置折线图选项
            var option = {
                animationDuration: 10000,
                title: {},
                tooltip: {
                    trigger: "axis"
                },
                legend: {
                    textStyle: {
                        color: "#fff",
                        fontSize: 20
                    },
                    top: "2%"
                    // left: "30%"
                },
                grid: {
                    height: 150,
                    width: 440
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    show: true,
                    axisLabel: {
                        showMinLabel: true,
                        interval: 0,
                        color: "#fff"
                    },
                    axisTick: {
                        interval: 40,
                        show: false
                    },
                    name: "时间（t/ms）",
                    nameTextStyle: {
                        color: "#fff"
                    },
                    data: []
                },
                yAxis: {
                    type: "value",
                    axisLabel: {
                        formatter: "{value}",
                        color: "#fff"
                    },
                    axisLine: {
                        show: true
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: "#333" // 将分隔线颜色设置为灰色
                        }
                    },
                    name: "电流（i/A）",
                    nameTextStyle: {
                        color: "#fff"
                    },
                    splitNumber: 2
                    // max: 1.8,
                    // min: -0.2
                },
                series: [
                    {
                        name: "电流",
                        type: "line",
                        data: jsonData1.data,
                        symbol: "none"
                    }
                ]
            };
            // 使用配置项绘制饼图
            myChart.setOption(option);
        },
        tu_b_data() {
            console.log(echarts);
            var myChart = echarts.init(document.getElementById("tu_b"));
            myChart.resize({
                width: 580,
                height: 250
            });

            // 配置折线图选项
            var option = {
                animationDuration: 10000,
                title: {},
                tooltip: {
                    trigger: "axis"
                },
                legend: {
                    textStyle: {
                        color: "#fff",
                        fontSize: 20
                    },
                    top: "2%"
                    // left: "30%"
                },
                grid: {
                    height: 150,
                    width: 440
                },
                xAxis: {
                    type: "category",
                    // boundaryGap: false,
                    onZero: false,
                    show: true,
                    axisLabel: {
                        showMinLabel: true,
                        interval: 0,
                        color: "#fff"
                    },
                    axisTick: {
                        interval: 40,
                        show: false
                    },
                    name: "时间（t/ms）",
                    nameTextStyle: {
                        color: "#fff"
                    },
                    data: []
                },
                yAxis: {
                    type: "value",
                    axisLabel: {
                        formatter: "{value}",
                        color: "#fff"
                    },
                    axisLine: {
                        show: true
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: "#333" // 将分隔线颜色设置为灰色
                        }
                    },
                    name: "行程（s/mm）",
                    nameTextStyle: {
                        color: "#fff"
                    },
                    splitNumber: 2
                    // max: 1.8,
                    // min: -0.2
                },
                series: [
                    {
                        name: "行程",
                        type: "line",
                        data: jsonData2.data,
                        symbol: "none"
                    }
                ]
            };
            // 使用配置项绘制饼图
            myChart.setOption(option);
        }
    }
};
</script>
<style scoped lang="scss">
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.home {
    width: 608px;
    height: 592px;
    // margin: 0 auto;
}

.BLQT_card {
    width: 100%;
    height: 592px;
    width: 100%;
    background: url("../assets/BLQT-BG.png") no-repeat;
    background-color: #101d29;
    margin-bottom: 10px;

    // 标题
    .BLQT_title {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    // 大标题
    .big_title {
        width: 144px;
        height: 40px;
        line-height: 38px;
        font-size: 20px;
        position: relative;
        font-weight: bold;
        font-family: MicrosoftYaHei-Bold;
        line-height: 38px;
        color: #e8e8e8;
        padding-left: 56px;
        text-align: center;
        flex: 1;
        /* 占据左边的剩余空间 */
        text-align: left;

        span {
            position: absolute;
            top: -2px;
            left: 586px;
            color: #909399;
            cursor: pointer;
        }
    }

    // // 小标题
    // .xiao_title {
    //   height: 16px;
    //   font-family: MicrosoftYaHei;
    //   font-size: 16px;
    //   font-weight: normal;
    //   font-stretch: normal;
    //   letter-spacing: 0px;
    //   color: #40e5f0;
    //   flex: 0.1;
    //   margin-right: 42px;
    //   /* 占据右边的剩余空间 */
    //   text-align: right;
    // }

    .BLQT_content {
        width: 608px;
        height: 552px;

        // background-color: #fff;
        .tu {
            width: 600px;
            height: 552px;
            margin: 0 auto;

            // background-color: pink;
            // #tu_a {
            //   // left: -12px;
            // }
            #tu_b {
                // left: -12px;
                top: -10px;
            }

            .tu_style {
                width: 580px;
                height: 250px;
                padding: 8px;
                // margin-top: 10px;
                // background-color: aqua;
            }

            .tu_style:nth-child(n + 2) {
                margin-top: 30px;
            }
        }
    }
}</style>
